<template>
    <view>
        <!-- <back></back> -->
        <u-navbar
            title="申请合作"
            :background="{ background: 'rgba(0,0,0,0)' }"
            :border-bottom="false"
            back-icon-color="#fff"
            title-color="#fff"
        ></u-navbar>
        <!-- <image src="@/static/yCreate/bg2.png" mode="widthFix" class="bg"></image> -->
        <view class="explain">
            <view>商家入驻权益说明文案商家入驻权益说明文案商家</view>
            <view>商家入驻权益说明文案商家入驻权益说明文案商家</view>
        </view>
        <view class="out">
            <view class="card">
                <view class="item u-border-bottom u-flex-center u-row-between">
                    <text>姓名</text>
                    <input
                        type="text"
                        placeholder="请输入您的姓名"
                        placeholder-class="ipt-sty"
                        v-model="name"
                    />
                </view>
                <view class="item u-border-bottom u-flex-center u-row-between">
                    <text>手机号</text>
                    <input
                        type="number"
                        placeholder="请输入手机号码"
                        placeholder-class="ipt-sty"
                        v-model="mobile"
                    />
                </view>
                <!-- <view class="item u-border-bottom u-flex-center u-row-between">
					<text>所售商品</text>
					<input type="number" placeholder="请输入所售商品" placeholder-class="ipt-sty" />
				</view> -->
                <view class="item u-border-bottom u-flex-center u-row-between" @click="show = true">
                    <text>所在地</text>
                    <text class="right" v-if="!city">{{ "请选择" }}</text>
                    <text class="right right2" v-else>{{ city }}</text>
                </view>
                <view class="item">
                    <text>营业执照</text>
                    <view class="top-sty">
                        <view class="top_wrap u-flex">
                            <view
                                class="top_img top_img_big u-flex-center"
                                v-for="(item, index) in fileList"
                            >
                                <image :src="item" v-if="item" mode="widthFix"></image>
                                <image
                                    src="@/static/yCreate/greenDelete.png"
                                    @click.stop="deleteImg(index)"
                                    class="ab_rig"
                                >
                                </image>
                            </view>
                            <view
                                class="top_img top_img_big u-flex-col u-col-center u-row-center"
                                @click="uploadImg()"
                                v-if="fileList.length < 1"
                            >
                                <image
                                    src="@/static/yCreate/add2.png"
                                    class="pho"
                                    mode="widthFix"
                                ></image>
                                <view>点击上传</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="card card2">
                <view class="title">商家入驻说明</view>
                <view class="content" v-html="contant"></view>
            </view>
        </view>
        <view style="height: 100rpx; width: 100%"></view>
        <view class="u-flex-center">
            <view class="button u-flex-center" @click="$u.throttle(save, 2000)">提交</view>
        </view>
        <u-picker
            mode="region"
            v-model="show"
            @confirm="confirm"
            confirm-color="#2BB984"
        ></u-picker>
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            fileList: [],
            fileList2: [],
            name: "",
            mobile: "",
            city: "",
            contant: "",
        };
    },
    onLoad() {
        this.$u.post("api/index/get_sqsm").then((res) => {
            this.contant = res.data;
        });
    },
    methods: {
        save() {
            this.$u
                .post("api/index/sq_shop", {
                    name: this.name,
                    mobile: this.mobile,
                    city: this.city,
                    image: this.fileList[0],
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.$u.toast("提交成功");
                        setTimeout(() => {
                            // uni.navigateBack()
                            uni.navigateBack({
                                delta: 1,
                            });
                        }, 1500);
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
        },
        uploadImg() {
            let that = this;
            uni.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"],
                success: function (res) {
                    uni.uploadFile({
                        url: "https://same.ascetic.top/api/common/upload_image", //上传
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        success: function (res) {
                            let data = JSON.parse(res.data);
                            that.fileList.push(data.data.fullurl);
                            that.fileList2.push(data.data.url);
                        },
                        fail: function (err) {},
                    });
                },
            });
        },
        deleteImg(index) {
            this.fileList.splice(index, 1);
            this.fileList2.splice(index, 1);
        },
        confirm(e) {
            this.city = e.province.label + "/" + e.city.label + "/" + e.area.label;
        },
    },
};
</script>

<style lang="scss">
.bg {
    position: fixed;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 0;
}
.explain {
    position: fixed;
    top: 270rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24rpx;
    color: #ffffff;
    white-space: nowrap;
}
.out {
    margin-top: 250rpx;
    position: relative;
    padding: 38rpx 30rpx;
    .card {
        width: 100%;
        background: #ffffff;
        border-radius: 20rpx;
        padding: 0 40rpx;
        margin-bottom: 20rpx;
        .item {
            padding: 40rpx 0;
            font-size: 30rpx;
            input {
                font-size: 30rpx;
                text-align: right;
            }
            .ipt-sty,
            .right {
                font-size: 30rpx;
                color: #b0b0b0;
            }
            .right2 {
                color: #333;
            }
        }
    }
    .card2 {
        padding: 40rpx;
        .title {
            margin: 0 0 20rpx 0;
            font-size: 30rpx;
        }
        .content {
            margin-top: 10rpx;
            font-size: 26rpx;
            color: #666666;
        }
    }
}
.top-sty {
    margin-top: 40rpx;

    .top_img {
        width: 160rpx;
        height: 160rpx;
        background: #f7f7f7;
        border-radius: 20rpx;
        position: relative;
        overflow: hidden;
        font-size: 24rpx;
        color: #b0b0b0;
        image {
            width: 100%;
            height: 100%;
        }

        .pho {
            margin-bottom: 10rpx;
            width: 40rpx;
            height: auto;
        }

        .ab {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            z-index: 2;
        }

        .ab_rig {
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            top: 6rpx;
            right: 6rpx;
            z-index: 2;
        }
    }

    .top_img_big {
        width: 160rpx;
        height: 160rpx;
        margin-right: 23rpx;

        &:nth-child(3n) {
            margin-right: 0rpx;
        }
    }
}
.button {
    position: fixed;
    bottom: 60rpx;
    width: 630rpx;
    height: 80rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #ffffff;
}
</style>
